<template>
    <view class='page'>
        <!-- <u-navbar v-show="scrollTop>20" title="个人中心" :is-back="false" :background="background"></u-navbar> -->
        <view v-show="scrollTop>20">
            <u-navbar class="gradient-bg" title="个人中心" navbarType="4" fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        </view>
        <view class="my-top">
            <!-- 用户信息 -->
            <view class="user-info" v-if="isLogin">
                <view class="leftbox" @click="onSetting()">
                    <view class="portrait">
                        <image :src="UserInfo.avatar" mode="aspectFill"></image>
                    </view>
                    <view class="info">
                        <view class="nickname">
                            <text>{{UserInfo.name}}</text>
                        </view>
                        <view class="rank">
                            <text>{{UserInfo.login_account}}</text>
                        </view>
                    </view>
                </view>
                <!-- <view class="icon">
                    <uni-icons type="right" color="#cfd0d1" size="20" />
                </view> -->
                <view class="rightbox">
                    <view class="icon" @click="onChat">
                        <view class="badge">
                            <u-badge type="error" max="99" :value="totalCount"></u-badge>
                        </view>
                        <u-icon name="chat" color="#ffffff" size="30" />
                    </view>
                    <view class="icon" @click="onSetting()">
                        <u-icon name="setting" color="#ffffff" size="28" />
                    </view>
                </view>
            </view>
            <view class="user-info" v-else>
                <view class="leftbox" @click="onUserInfo">
                    <view class="portrait">
                        <image src="/static/logo.png" mode="widthFix"></image>
                    </view>
                    <view class="info">
                        <view class="nickname">
                            <text>登录/注册</text>
                        </view>
                    </view>
                </view>
                <view class="icon">
                    <!-- <uni-icons type="right" color="#cfd0d1" size="20" /> -->
                </view>
            </view>
        </view>
        <view class="my-list mgt-20">
            <view class="list" @click="goPage('health')">
                <view class="box">
                    <view class="title">
                        <image src="../../static/mine/money.png" mode="widthFix"></image>
                        <text>今日收入</text>
                    </view>
                    <view class="more-content">
                        <text class="content">¥{{data && data.income ? data.income.today.toFixed(2) : 0.00}}</text>
                        <!-- <uni-icons type="right" color="#cfd0d1" size="16" /> -->
                    </view>
                </view>
            </view>
            <view class="list" @click="goPage('health')">
                <view class="box">
                    <view class="title">
                        <image src="../../static/mine/income.png" mode="widthFix"></image>
                        <text>本周收入</text>
                    </view>
                    <view class="more-content">
                        <text class="content">¥{{data && data.income ? data.income.thisweek.toFixed(2) : 0.00}}</text>
                        <!-- <uni-icons type="right" color="#cfd0d1" size="16" /> -->
                    </view>
                </view>
            </view>
        </view>
        <!-- 接口关系暂时隐藏 -->
        <!-- <view class="box1" @click="toPage('/pagesB/withdrawal/index')">
            <view class="box">
                <view class="txt">
                    <view class="money">
                        <view class="p">待提现金额：</view>
                        <view class="num">
                            <text>¥</text>
                            <text v-if="data&&data.user">{{ data.user.remain_amount }}</text>
                        </view>
                    </view>
                    <view class="btn">立即提现</view>
                </view>
            </view>
        </view> -->
        <view class="box2">
            <view class="box">
                <view class="boxt">
                    <view class="line"></view>
                    <text class="p">服务收入概览</text>
                </view>
                <view class="charts-box">
                    <qiun-data-charts v-if="isLogin" type="pie" :chartData="chartsDataPie1" />
                    <qiun-data-charts v-else type="pie" :chartData="chartsDataPie0" />
                </view>
            </view>
        </view>
        <view class="my-list my-list1">
            <view class="list" @click="toPage('/pagesB/service/service')">
                <view class="box">
                    <view class="title">
                        <image src="../../static/mine/heart.png" mode="widthFix"></image>
                        <text>服务管理</text>
                    </view>
                    <view class="more-content">
                        <!-- <text class="content">¥{{data && data.income?data.income.total.toFixed(2):0.00}}</text> -->
                        <uni-icons type="right" color="#cfd0d1" size="16" />
                    </view>
                </view>
            </view>
            <view class="list" @click="toPage('/pagesB/after-sales/after-sales')">
                <view class="box">
                    <view class="title">
                        <image src="../../static/mine/package.png" mode="widthFix"></image>
                        <text>售后管理</text>
                    </view>
                    <view class="more-content">
                        <!-- <text class="content">¥99999.00</text> -->
                        <uni-icons type="right" color="#cfd0d1" size="16" />
                    </view>
                </view>
            </view>
        </view>

        <loading :show="loading"></loading>

        <public-module></public-module>

        <TabBar></TabBar>
    </view>
</template>

<script>
import { users } from "@/api/mine.js"
import {
    mapState,
    mapMutations
} from 'vuex';
export default {
    components: {},
    computed: {
        ...mapState({
            unreadMessages: state => state.user.unreadMessages,
        }),
        totalCount: {
            get() { return this.unreadMessages },
            set(val) { }
        }
    },
    data() {
        return {
            scrollTop: 0,
            isLogin: uni.getStorageSync('token') ? true : false,
            UserInfo: {},
            chartsDataPie0: {
                "series": [{
                    "data": [
                        {
                            "name": "暂未登录",
                            "value": 0
                        },
                    ]
                }]
            },
            chartsDataPie1: {
                "series": [{
                    "data": [

                    ]
                }]
            },
            loading: false,
            data: {},
            background: {
                // 渐变色
                backgroundColor: '#ffffff',
            },
        };
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    onShow() {
        if (uni.getStorageSync('token')) {
            this.getUserInfo()
            this.getList()
        }
    },
    onLoad(options) {

    },
    methods: {
        getList() {
            this.loading = true
            users().then(res => {
                console.log(res.data, 77777)
                this.data = res.data
                console.log(this.data, 8888)
                if (this.data.orders && this.data.orders.cates) {
                    console.log(2)
                    // setTimeout(() => {
                    this.chartsDataPie1.series[0].data = []
                    this.data.orders.cates.forEach(e => {
                        console.log(e.num, 123456)
                        this.chartsDataPie1.series[0].data.push({
                            name: e.name,
                            value: e.num
                        })
                    });
                    // }, 1500);
                }
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        onChat() {
            this.judgeLogin(() => {
                uni.navigateTo({
                    url: "/pagesB/msg/msg",
                });
            });
        },
        getUserInfo() {
            this.UserInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : {}
        },
        onUserInfo() {
            uni.navigateTo({
                url: '/pagesB/login/index'
            })
        },
        onSetting() {
            uni.navigateTo({
                url: '/pagesB/mine/setting'
            })
        },
        toPage(url) {
            this.judgeLogin(() => {
                uni.navigateTo({
                    url: url
                });
            });
        },
    },
};
</script>
<style scoped lang='scss'>
.page {
  position: absolute;
  width: 100%;
  // height: 100%;
  padding-bottom: 150rpx;
  background-color: #f6f6f6;
}
.my-top {
  //   position: relative;
  width: 100%;
  height: 335rpx;
  /* #ifdef APP-PLUS */
  height: 335rpx;
  /* #endif */
  /* #ifdef MP */
  height: 335rpx;
  /* #endif */
  background: linear-gradient(to bottom, #2e996e, #3f99ab);
  //   border-radius: 0% 0% 15% 15%;
  overflow: hidden;

  /* 用户信息 */
  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    height: 120rpx;
    margin-top: 100rpx;
    /* #ifdef APP-PLUS */
    margin-top: 130rpx;
    /* #endif */
    /* #ifdef MP */
    margin-top: 130rpx;
    .leftbox {
      display: flex;
      align-items: center;
      .portrait {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 120rpx;
          height: 120rpx;
          //   height: 100%;

          border: 4rpx solid #ffffff;
          box-sizing: border-box;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 48%;
        height: 100%;

        .nickname {
          width: 100%;
          padding: 10rpx 0;

          text {
            color: #ffffff;
            font-size: 28rpx;
          }
        }

        .rank {
          display: flex;
          align-items: center;
          // width: 120rpx;
          height: 30rpx;
          // padding: 0 20rpx 0 0;
          // border: 2rpx solid #f0ad4e;
          // border-radius: 30rpx;

          // image {
          //   width: 24rpx;
          //   height: 24rpx;
          // }

          text {
            font-size: 24rpx;
            color: #ffffff;
            margin-right: 20rpx;
          }
        }
      }
    }
    /* #endif */
    .rightbox {
      display: flex;
      .icon {
        padding: 10rpx;
        position: relative;
        .badge {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 999;
        }
      }
    }
  }
}
.my-list {
  //   padding: 0 4%;
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  margin: 20rpx auto;
  .list {
    width: 100%;
    border-bottom: 2rpx solid #bdbdbd;
    .box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100rpx;
      .title {
        display: flex;
        align-items: center;
        image {
          width: 36rpx;
          margin-right: 30rpx;
        }
        text {
          font-size: 28rpx;
          color: #2d996c;
        }
      }
      .more-content {
        display: flex;
        align-items: center;
        .content {
          font-size: 28rpx;
          color: #262626;
          padding-right: 14rpx;
        }
      }
    }
  }
}
.mgt-20 {
  margin-top: -20rpx;
}
.my-list1 {
  border-radius: 0;
  background-color: #f5f6f8;
}
.box1 {
  background-color: #f5f6f8;
  padding: 0 0 20rpx;
  .box {
    height: 174rpx;
    background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
      linear-gradient(#28c445, #28c445);
    background-blend-mode: normal, normal;
    border-radius: 15rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .txt {
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .money {
        .p {
          font-size: 30rpx;
          color: #ffffff;
        }
        .num {
          padding-top: 12rpx;
          text {
            font-size: 24rpx;
            color: #fff000;
            &:nth-child(2) {
              font-size: 36rpx;
              font-weight: 600;
            }
          }
        }
      }
      .btn {
        width: 263rpx;
        height: 61rpx;
        background-color: #ffc956;
        border-radius: 15rpx;
        line-height: 61rpx;
        text-align: center;
        font-size: 30rpx;
        color: #262626;
      }
    }
  }
}
.box2 {
  padding: 30rpx 0;
  background-color: #fff;
  .box {
    .boxt {
      display: flex;
      align-items: center;
      .line {
        width: 8rpx;
        height: 32rpx;
        background-image: linear-gradient(0deg, #2d9c69 0%, #4299ba 100%),
          linear-gradient(#3e99a8, #3e99a8);
        background-blend-mode: normal, normal;
        box-shadow: 0px 0px 27rpx 0px rgba(49, 155, 121, 0.25);
        border-radius: 4rpx;
      }
      .p {
        font-size: 28rpx;
        padding-left: 16rpx;
        display: block;
        font-weight: 600;
      }
    }
  }
}
</style>